<template>
	<view class="bg-white">
		<view class="text-xl padding bg-white">
			<text class="text-bold text-xxl">{{activity_data.title}}</text>
		</view>
		<view class="flex padding bg-white">
			<!-- <image src="../../static/icon/shop/icon.png" style="width: 40rpx;height: 40rpx;"></image> -->
			<text class="basis-sm text-grey justify-start iconfont">积分&#xe629; : {{activity_data.scores}}</text>
			<text class="basis-sm text-grey justify-end">发起人: {{activity_data.creator}}</text>
		</view>
		<view class="list-picture bg-white">
			<image v-if="activity_data.imgPath[0]" :src='activity_data.imgPath[0]' mode="heightFix"></image>
		</view>
		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content">
					<text class="padding iconfont text-grey text-xxl">&#xe616;</text>
					<text class="text-grey">{{activity_data.date}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="padding iconfont text-grey text-xxl">&#xe6ad;</text>
					<text class="text-grey">{{activity_data.starttime}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="padding iconfont text-grey text-xxl">&#xe618;</text>
					<text class="text-grey">{{activity_data.tag}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="padding iconfont text-grey text-xxl">&#xe610;</text>
					<text class="text-grey">{{activity_data.place}}</text>
				</view>
			</view>
			<view class="cu-item" @tap="showModal">
				<view class="content">
					<text class="padding iconfont text-pink text-xxl">&#xe602;</text>
					<text class="text-grey">已报名</text>
				</view>
				<view class="action">
					<view class="cu-avatar-group" >
						<view class="cu-avatar round sm" v-for="avatar in avatarStyleList" :key='avatar.index' :style='avatar'></view>
					</view>
					<text class="text-grey text-sm">{{membersInfo.length}}人</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName?'show':''" @tap="hideModal">
			<view class="cu-dialog" style="max-height: 50%; overflow-y: scroll;" @tap.stop>
				<view class="cu-list menu text-left solid-top">
					<view class="cu-item" v-for="person in membersInfo" :key='person.index'>
						<view class="content">
							<image class="cu-avatar round sm" :src='person.avatar'></image>
							<text class="text-grey">{{person.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="margin-top"></view>
		<view v-for="(img, index) in activity_data.imgPath" :key='index' @click="previewImg(activity_data.imgPath, index)">
			<image class="detailImg" :src='img' v-if='index != 0' mode='widthFix'></image>
		</view>
		<view class="desc-box">
			{{activity_data.desc}}
		</view>
		<view v-if="activity_data.date>=today">
			<view class="cu-bar btn-group foot" v-if="!hasJoined">
				<button class="cu-btn bg-blue shadow-blur round lg" @click="joinActivity">Join Us</button>
			</view>
			<view class="cu-bar btn-group foot" v-if="hasJoined">
				<button class="cu-btn bg-red shadow-blur round lg" @click="quitActivity">退出活动</button>
				<button class="cu-btn bg-brown shadow-blur round lg" @click="getCheckinQRCode" v-if="isCreator">获取签到二维码</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import shareMsg from '@/common/shareMessage.js';
	const app = getApp();
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				// id: 5ff3d0a123976b0001665946  测试使用
				activity_id: '5ff3d0a123976b0001665946',
				activity_data: {
					desc: '努力加载中',
					title: '努力加载中',
					imgPath: []
				},
				// 报名人员信息
				membersInfo: [],
				// 报名头像列表，测试使用
				avatarStyleList: [],
				modalName: null,
				hasJoined: false,
				isCreator: false,
				uid: '',
				today: '2021-01-01',
			}
		},
		methods: {
			onShareAppMessage() {
				var pathList = getCurrentPages()
				var path = pathList[pathList.length - 1].route
				return shareMsg.shareMsg({
					title: "AIIT活动中心",
					path: path + '?id=' + this.activity_id,
					imageUrl: ''
				})
			},
			onLoad: function(event) {
				var today_tmp = new Date();
				this.today = today_tmp.toISOString().slice(0,10)
				uni.showLoading({
					title: '加载ing'
				})
				// TODO 判断云函数调用情况，数据没加载出来前显示加载中
				this.activity_id = event.id;
				this.loadInfo();
				this.uid = app.globalData.userInfo._id
				// 检查用户信息是否完整
				utils.checkUserInfo()
				.then()
				.catch(err => {
					uni.showModal({
						content: '请先完善个人信息',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/profile/userDetail'
								})
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				});
			},
			previewImg: function(urls, index) {
				uni.previewImage({
					urls: urls,
					indicator: true,
					current: index
				})
			},
			showModal(e) {
				this.modalName = true
			},
			hideModal(e) {
				this.modalName = null
			},

			joinActivity(e) {
				if (!app.globalData.hasLogin) {
					uni.showModal({
						title: "请先登录",
						success: (res) => {
							res.confirm && uni.switchTab({
									url: "../profile/profile"
								})
						}
					})
				}else if (app.globalData.userInfo.name == undefined) {
					uni.showModal({
						title: "请先完善个人信息",
						success: (res) => {
							res.confirm && uni.navigateTo({
									url: "../profile/userDetail"
								})
						}
					})
				} else if (app.globalData.hasLogin) {
					this.activity_data.members.push(this.uid)
					db.collection('activities').doc(this.activity_id).update({
						members: this.activity_data.members
					}).then(() => {
							uni.showToast({
								title: '报名成功'
							})
							this.loadInfo();
						})
				}  
				
			},

			quitActivity(e) {
				uni.showModal({
					title: '确定要退出吗？',
					cancelText: '我再想想',
					confirmText: '去意已决',
					confirmColor: '#aa0000',
					success: (res) => {
						if (res.confirm) {
							var index = this.activity_data.members.indexOf(this.uid);
							this.avatarStyleList.splice(index, 1);
							this.activity_data.members.splice(index, 1);
							db.collection('activities').doc(this.activity_id).update({
								members: this.activity_data.members
							}).then( () => {
								this.loadInfo()
							})
						}
					}
				})
			},

			loadInfo(e) {
				// 调用云函数来获取活动相信信息： 活动名、日期、图片、描述等
				db.collection('activities').doc(this.activity_id).get().then(res => {
					this.activity_data = res.result.data[0];
					// 判断是否报名
					this.hasJoined = res.result.data[0].members.includes(this.uid);
					if (this.uid == res.result.data[0].CreatorUid) {
						this.isCreator = true
					}
					// 更改标题
					uni.setNavigationBarTitle({
						title: this.activity_data.title
					})
					db.collection('uni-id-users').where({
						_id: _.in(res.result.data[0].members)
					}).field('name, avatar')
					.get().then(res => {
						this.membersInfo = res.result.data
						// 显示前4个报名人的头像
						for (var index in res.result.data.slice(0, 4)) {
							this.avatarStyleList[index] = 'background-image:url(' + res.result.data[index].avatar + ');'
						}
					})
					.then(() => {
						uni.hideLoading()
					})
				})
			},
			getCheckinQRCode: function(e) {
				uniCloud.callFunction({
						name: 'getAccessToken',
						success: (res) => {
							const rqcode_url = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.result;
							uni.request({
									url: rqcode_url,
									data: {
										scene: this.activity_id,
										page: "pages/activities/checkin"
									},
									method: 'POST',
									responseType: 'arraybuffer',
									success: (res) => {
										// arrayBuffer 转Base64 显示出来
										const img_url = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
										// 浏览二维码，便于保存
										uni.previewImage({
											urls: [img_url]
										})
										}
									})
							}
						})
				}
			}

		}
</script>

<style>
	.list-picture {
		border-radius: 20rpx;
		width: 100%;
		height: 100%;
		justify-content: center;
		overflow: hidden;
	}

	.detailImg {
		width: 100%;
		height: 100%;
	}

	.cu-bar.foot {
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		z-index: 1024;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0);
	}
	
	.desc-box {
		margin-left: 30rpx;
		padding-bottom: 100rpx;
		font-size: 30rpx;
		
	}
</style>
